$(function () {
  // 获取页面数据 并赋值  封装
  function initForm () {
    // 获取id 
    let id = location.href.split('=')[1]
    axios({
      url:'/my/article/'+id
    }).then(res=>{
      //成功回调
      let {data:{status,data,message}} = res
      if(status != 0){
        return layui.layer.msg(message)
      }
      layui.form.val("formTest",data)
      tinyMCE.activeEditor.setContent(data.content)
      // 路径需要加上根路径
      let url = 'http://api-breakingnews-web.itheima.net'+data.cover_img
      $('#image')
           .cropper('destroy')      // 销毁旧的裁剪区域
           .attr('src',url)  // 重新设置图片路径
           .cropper(options) 
    })

  }

  //需求1. 获取文章类别列表数据 后续要使用封装函数
  initCateList ()
  //封装文章列表
  function initCateList () {
    axios({
      url:'/my/article/cates'
    }).then(res=>{
      //成功回调
      let {data:{status,data,message}} = res
      if(status != 0){
        return layui.layer.msg(message)
      }
      let arr = ['<option value="">请输入文章类别</option>']
      data.forEach(ele => {
        if (ele.Id < 0) return
        arr.push(`<option value=${ele.Id}>${ele.name}</option>`)
      })
      $('select').empty().html(arr.join(''))
      layui.form.render()
      // 文章类别列表渲染完后再渲染页面
      initForm ()
    })
  }

  // 需求2.初始化富文本编辑器
  initEditor()

  // 需求3. 封面区域
  // 3.1. 初始化图片裁剪器
  let  options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3.2. 初始化裁剪区域
  $('#image').cropper(options)
  // 3.3 点击事件触发封面选择
  $('#cover-btn').click(function(){
    $('[type=file]').click()
  })
  // 3.4 触发图片选择事件
  $('[type=file]').on('change',function(){
    let file = this.files[0]
    if(!file){
      return layui.layer.msg('封面不能为空')
    }
    let newImgURL = URL.createObjectURL(file)
    $('#image')
           .cropper('destroy')      // 销毁旧的裁剪区域
           .attr('src', newImgURL)  // 重新设置图片路径
           .cropper(options)        // 重新初始化裁剪区域
  })

  //设置state的值
  let state
  $("#fa").click(function(){
    state = '已发布'
  })
  $("#cao").click(function(){
    state = '草稿'
  })

  // 需求4 修改提交表单
  $('#formPub').on('submit',function(e){
    e.preventDefault()
    // 要求以FormData方法 存储数据
    let fd = new FormData(this)
    fd.append('state',state)
    //cover_img数据要以blob二进制 发送
    $("#image")
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
          width: 400,
          height: 280
        })
        .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
          // 得到文件对象后，进行后续的操作
          fd.append('cover_img',blob)
          console.log(...fd)
          // 由于是异步操作 所有在获取数据后发送ajax
        /*   axios({
            url:'/my/article/add',
            method:'post',
            data: fd
          }).then(res=>{
            //成功回调
            let {data:{status,message}} = res
            if(status != 0){
              return layui.layer.msg(message)
            }
            layui.layer.msg('恭喜发表文章成功')
          }) */

          //jq方法
          $.ajax({
            url:'http://api-breakingnews-web.itheima.net/my/article/edit',
            type:'post',
            data:fd,
            // jq没有全局设定请求头
            headers:{
              Authorization:localStorage.getItem('token')
            },
            // jq中FormData方法传递数据 需要设置两个false
            contentType: false,
            processData: false,
            success: function(res){
              if(res.status != 0){
                return layui.layer.msg(res.message)
              }
              layui.layer.msg(state == '草稿'?'存为草稿':'恭喜修改文章成功')
              //1.5秒后跳转到art_list.html
              setTimeout(function(){
                // location.href = '/article/art_list.html'
                window.parent.document.querySelector('#list').click()
              },1500)
            }
          })
        })   
  })
})
